<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加句柄</title>
</head>
<body>
    <button id="btn">Try</button>
    <a id="text"></a>
</body>
<script>
    var btn  =document.getElementById('btn');
    var func =function(event){
        var a =document.getElementById('text');

        var myScreenX,myScreenY,myClientX,myClientY;
        var e = event || window.event;

        //相较于屏幕的位置
        myScreenX=e.screenX;
        myScreenY=e.screenY;

        //相较于浏览器的位置
        myClientX=e.clientX;
        myClientY=e.clientY;

        //相较于文档（body）的位置
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;

        txt ='相较于屏幕的位置;X:'+myScreenX+';Y:'+myScreenY+'\r\n'+'相较于浏览器的位置;X:'+myClientX+';Y:'+myClientY+'\r\n'+'相较于文档（body）的位置;X:'+x+';Y:'+y+'\r\n';
        a.innerHTML =txt;
        btn.removeEventListener('click',func)
    };
    btn.addEventListener('click',func);
</script>
</html>